// 相册展示界面
<template>
  <!-- 背景框 -->
  <el-card class="box-card" :span="24">
      <!-- 标题栏相册部分 -->
      <el-tabs v-model="activeName" @tab-click="handleClick" :span="24">
        <el-tab-pane label="相册" name="first">
          <!-- 按钮部分 -->
          <el-button type="primary" @click="phtotoDialogVisible = true">上传照片</el-button>
          <el-button type="primary" @click="uploadVideoDialogVisible = true">上传视频</el-button>
          <el-button @click="addPhotoItemCatDialogVisible = true">创建相册</el-button>
          <el-button size="small" style="margin-left: 900px;" @click="retreatFrom">返回</el-button>

          <!-- 相册框创建 -->
          <el-row>
            <el-col :span="7" :index="menu.id+''" v-for="menu in menuList" :key="menu.id" :offset="index = 2">
              <el-card :body-style="{ padding: '0px',width:'100%'}" class="card1">
                <div @click="browsePhotoBtn(menu.photoName)" >  
                <img  :src="menu.photoUrl" :fit="fits" class="image">
                <div v-text="menu.photoName" class="cardDivs"></div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 照片预览 -->
          <el-row>
            <el-col :span="7" :index="menu.id+''" v-for="menu in this.photoUrls" :key="menu.id" :offset="index = 2">
              <el-card :body-style="{ padding: '0px',width:'100%'}" class="card1">
                <div>
                <el-image  :src="menu" :preview-src-list="photoUrls"   style="width: 99%;height: 160px;"></el-image>
                <div class="cardDiv">{{$moment(update).format('YYYY年MM月DD日')}}</div>
                </div>
              </el-card>
            </el-col>
          </el-row>

        </el-tab-pane>


        <!-- 标题栏中的视频部分 -->
        <el-tab-pane label="视频" name="second">
          <el-button type="primary" @click="uploadVideoDialogVisible = true">上传视频</el-button>
          <el-card class="textItem">
            <div class="textItemdiv">
              
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>

      <!-- 创建相册 -->
      <!-- 创建相册对话框 visible.sync 控制对话框的显示-->
      <!-- :append-to-body="true"该属性是解决遮罩层的 -->
      <el-dialog title="创建相册" :visible.sync="addPhotoItemCatDialogVisible" width="50%"  @close="closeAddPhotoItemCatDialog" append-to-body>
        <!-- 定义相册提交表单数据-->
        <el-form :model="addPhotoModel" :rules="addPhotoCat" ref="addPhotoCatRef" label-width="100px" class="demo-ruleForm">
          <el-form-item label="相册名称" prop="photoname">
            <el-input v-model="addPhotoModel.photoName"></el-input>
          </el-form-item>
          <el-form-item label="相册描述">
            <el-input  type="textarea" :rows="5" v-model="addPhotoModel.photoDescribe" placeholder="这个相册的故事...(非必填)"></el-input>
          </el-form-item>
          
          <el-form-item label="相册主题" prop="phototheme">
            <el-radio-group v-model="addPhotoModel.photoTheme">
            <el-radio v-model="radio" :label="3">亲子</el-radio>
            <el-radio v-model="radio" :label="6">旅游</el-radio>
            <el-radio v-model="radio" :label="9">玩伴</el-radio>
            </el-radio-group>
          </el-form-item>
        
          <el-form-item label="相册分类" prop="photosort">
              <el-select v-model="addPhotoModel.photoSort" placeholder="请选择">
                <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="addPhotoItemCatDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addPhotoItemCatBtn">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 上传照片 -->
      <el-dialog title="上传照片" :visible.sync="phtotoDialogVisible" width="96%" @close="phtotoCloseDialog" append-to-body>
        
        <!-- 定义用户提交表单数据-->
        <el-form :model="phtotoModel" ref="phtotoRef" label-width="100px" class="demo-ruleForm">
          <el-form-item label="上传到" prop="photoName">
            <el-select class="el-input-inner" v-model="phtotoModel.photoName" placeholder="请选择">
              <el-option v-for="item in menuList" :key="item.id" :label="item.photoName" :value="item.photoName"></el-option>
            </el-select>
          </el-form-item>
          
          
            <el-upload :action="uploadUrl" ref='files' list-type="picture-card" :auto-upload="true" :on-success="handleSuccess" multiple >
              <!-- 默认框里面的加号 -->
              <i slot="default" class="el-icon-plus"></i>

              <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <!-- <span v-if="!imageDisabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                    <i class="el-icon-download"></i>
                  </span> -->
                  <span v-if="!imageDisabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>

            <!-- 图片回显 -->
              <el-dialog class="imageUrlDialog" :visible.sync="imageUrlDialogVisible" append-to-body>
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
        
        </el-form>
        

          <span slot="footer" class="dialog-footer">
            <el-button @click="phtotoDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="phtotoBtn">确 定</el-button>
          </span>
      </el-dialog>


      <el-dialog title="提示" :visible.sync="uploadVideoDialogVisible" width="50%" :before-close="uploadVideoHandleClose" append-to-body>
        <div class="textItemdiv2"></div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="uploadVideoDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="uploadVideoDialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      
      

      
    

  </el-card>
</template>

<script>
export default {
    // 引入页面自动刷新的方法
    inject: ['reload'],
    //页面进行初始化的时候开始调用回调函数
    created(){
      //动态获取相册信息
      this.getMenuList()
      //设定模式选中按钮
      // this.defaultActive = window.sessionStorage.getItem("activeMenu")

    },
    data(){
        return {
          uploadUrl:"http://localhost:8099/file/upload",
          // 上传的属性
          dialogImageUrl: '',

          imageUrlDialogVisible: false,
          imageDisabled: false,
          uploadVideoDialogVisible: false,
          phtotoModel:{
            photoName: '',
            photoPath: [],
            photoUrl: []
          },

          fits: ['fill'],
          virtualPath:'',
          //相册菜单的数据
          menuList:[],
          browseList:{
            id:'',
            parentId:'',
            photoName:'',
            photoDescribe:'',
            photoTheme:'',
            photoSort:'',
            photoPath:[],
            photoUrl:[],
            date:'',
            status:'', 
          },
          url:'',
          
          
            photoUrls:[],
            update:'',
            lengths: 0,
            browseOne:'',
          
        
          currentDate: new Date(),/* 获取当前时间暂时用不到 */
          activeName: "first",
          phtotoDialogVisible: false,
          addPhotoItemCatDialogVisible: false,
          radio: 3,
          addPhotoModel:{
              photoName:'',
              photoDescribe:'',
              photoTheme: 3,
              photoSort:'选项5'
          },
          option: [{
              value: '选项1',
              label: '人物'
            }, {
              value: '选项2',
              label: '生活'
            }, {
              value: '选项3',
              label: '学校'
            }, {
              value: '选项4',
              label: '游记'
            }, {
              value: '选项5',
              label: '其他'
            }],
            value: '选项5',
            //数据校验规则
            addPhotoCat: {
              photoName: [
                      { required: true, message: '相册名称不能为空，请先输入名称', trigger: 'blur' },
                    ],
              photoTheme:[
                      { required: true, trigger: 'blur' },
                    ],
              photoSort:[
                      { required: true, trigger: 'blur' },
                    ],
            }
        }
      },
      
            //2.3 定义组件的标签体  方式1: 字符串拼接  
            //					  方法2: ES6 模板字符串写法 块级作用域 反引号``
            //					  方法3: template 模板语法
            template: "#addNumTem",
            
    methods: {
        retreatFrom(){
          //页面自动刷新的方法到默认位置
          this.reload() 
        },
        // 添加相册的封面
        async addPhotoCover(){

          this.phtotoModel.photoName=this.phtotoModel.photoName;
          // this.phtotoModel.photoPath=this.phtotoModel.photoPath.join(",");
          
          this.phtotoModel.photoUrl=(this.phtotoModel.photoUrl||'').split(',')[0]
          // this.phtotoModel.photoUrl=this.phtotoModel.photoUrl.join(",");
          // console.log(this.phtotoModel.photoUrl)
          const {data: result} = await this.$http.put('/photo/photoUpload',this.phtotoModel)
          if(result.status !== 200) return this.$message.error("封面存入失败！")
        },
        //查询相册
        async getMenuList() {
          const {data: result} =  await this.$http.get('/photo/getPhotoList')
          if(result.status !== 200) return this.$message.error("相册菜单查询失败！")
          //如果请求正常,则将返回值结果赋值给vue的data
          this.menuList = result.data

          // console.log(this.menuList)

        },
        //查询相册里面的图片
        async browsePhotoBtn(parameter) {//parameter变量名称
          console.log(parameter)
          this.menuList=0
          const {data: result} =  await this.$http.get('/photo/getBrowsePhotoList?'+"photoName"+"="+parameter)
          if(result.status !== 200) return this.$message.error("图片查询失败！")
          //如果请求正常,则将返回值结果赋值给vue的data
          this.browseList = result.data
          for (let i = 0; i < this.browseList.length; i++) {
            const element = this.browseList[i];
            this.photoUrls=(element.photoUrl||'').split(',')
            // this.browseOne=(element.photoUrl||'').split(',')[0]
            // console.log(this.browseOne)
            // console.log(this.photoUrls)
            this.lengths=this.photoUrls.length
            // console.log(this.photoUrls.length)
            // console.log(this.lengths)          
            this.update=element.date
            // console.log(this.update)
            
          }
        },
        // 标题栏部分
        handleClick(tab, event) {
          //页面自动刷新的方法
          // this.reload() 
          console.log(tab, event);
        },
        //上传照片
        phtotoCloseDialog(){
          //重置页面数据
          this.$refs.phtotoRef.resetFields();
          this.getMenuList()
        },
        //创建相册
        closeAddPhotoItemCatDialog(){
          //重置表格数据
          this.$refs.addPhotoCatRef.resetFields()
        },
        //创建相册提交数据
        addPhotoItemCatBtn(){
          this.$refs.addPhotoCatRef.validate(async valid => {
              //如果校验失败 则停止数据
              if(!valid) return this.$message.error("请输入相册名称必填项")
              //console.log(this.addUserModel)
              const {data: result} = await this.$http.post('/photo/savePhoto',this.addPhotoModel)
              if(result.status !== 200) return this.$message.error("相册创建失败");
              console.log(result.data);

              //相册创建的次数
              // this.num=(result.data)+1;
              // console.log(this.num)
              this.$message.success("相册创建成功")
              //关闭对话框
              this.addPhotoItemCatDialogVisible = false
              //重置页面数据
              this.getMenuList()
          })
        },
        
        //上传图片删除操作
        async handleRemove(file) {
          console.log(file)
          //移除数组中的数据
            let virtualPath = file.response.data.virtualPath
            //通过findIndex函数 获取数组中指定数据的位置
            let index = this.phtotoModel.photoPath.findIndex(x => x === virtualPath)
            //删除数组中指定的数据
            this.phtotoModel.photoPath.splice(index, 1)
            //删除服务中的文件
            let {
              data: result
            } = await this.$http.delete("/file/deleteFile", {
              params: {
                virtualPath: virtualPath
              }
            })
            // 获取到该组件调用handleRemove方法删除file对象
            this.$refs.files.handleRemove(file)
            if (result.status !== 200) return this.$message.error("删除图片失败")
            this.$message.success("删除图片成功")
        },
        // 图片上传
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.imageUrlDialogVisible = true;
        },
        //如果文件上传成功之后调用
        handleSuccess(response, file) {
            if (response.status !== 200) return this.$message.error("文件上传失败")
            file.name = response.data.fileName
            //获取虚拟路径
            let virtualPath = response.data.virtualPath
            console.log(virtualPath)
            let path= response.data.urlPath
            console.log(path)
            //将数据封装到Form表单中
            this.phtotoModel.photoPath.push(virtualPath)
            this.phtotoModel.photoUrl.push(path)
        },
        //上传图片提交数据
        async phtotoBtn(){
              this.uploadUrl;
              this.phtotoModel.photoPath=this.phtotoModel.photoPath.join(",");
              this.phtotoModel.photoUrl=this.phtotoModel.photoUrl.join(",");
            
              const {data: result} = await this.$http.post('/photo/imageUpload',this.phtotoModel)
              if(result.status !== 200) return this.$message.error("图片上传失败");

              this.$message.success("图片上传成功")
              // 设置默认的相册封面背景
              this.addPhotoCover();
              //关闭对话框
              this.phtotoDialogVisible = false
              //重置页面数据
              this.$refs.phtotoRef.resetFields();
              //页面自动刷新的方法
              this.reload() 
        },
        uploadVideoHandleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    
      }
  }

</script>

<style lang="less" scoped>
/* 界面样式 */
.box-card {
  width: 1324px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 8px rgb(190, 183, 194);
  position: absolute;
  left: 766px;
  top: 120px;
  transform: translate(-670px, 102px);
  }
.button-anniu {
  width: 314px;
  height: 21px;
  position: absolute;
  left: 160px;
  top: 70px;
  transform: translate(-50%, 25%);
}
.el-dialog__body {
    height: 100%;
    padding: 30px 20px;
    font-size: 14px;
    // word-break: break-all;
}



.el-input-inner{
    margin: 0px 8px 0px;
    padding: 0px 6px 0px;
    padding-left: 10px;
}

/* 创建相册样式 */
.card1{
  box-sizing: border-box;
  padding: 3px;
  width: 170px;
  height: 200px;
}

.card1 img{
  width: 99%;
  height: 160px;
  display: block;
}
.cardDivs{
  margin: 8px 2px 0px;
}
.cardDiv{
  margin: 10px 0px 0px;
  padding: 0px 5px 0px;
}
.el-col{
  box-sizing: border-box;
  width: 145px;
  height:220px;
  margin-right: 30px;
  margin-left: 5px;
  margin-top: 10px;
  
}
.box-card-dialog{
width: 90%;
height: 100%;
}
.imageUrlDialog{
  width: 100%;
  margin-right: 0px;
  margin-left: 0px;
  margin-top: -110px;
}
.textItem{
  width: 100%;
  height: 100%;
  margin: 20px 0px 0px;
  padding: 0px 5px 0px;
}
.textItemdiv{
  width: 100%;
  height: 317px;
  background-image: url(../assets/images/qidai1.png);
}
.textItemdiv2{
  width: 100%;
  height: 317px;
  background-image: url(../assets/images/qidai2.png);
}
</style>